<template>
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="closeMore">
		<!-- <image
			src="http://112.124.50.179:8888/imgs/home/popbg.png"
			mode="widthFix"
			class="popBgc"
		></image> -->
		<view class="popup_con_jingxiang">
			<view class="fixedTitle_jingxiang">
				<view class="left"></view>
				<view class="middle">敬香</view>
				<view class="right">
					<u-icon
						@click="closeMore"
						class="close"
						name="close"
						color="black"
						size="20"
					></u-icon>
				</view>
			</view>

			<view class="jingxiang">
				<view
					class="jingxiang_item"
					v-for="(item, index) in jingxiang_list"
					@click="chooseItem(item, index)"
				>
					<view :class="['jingxiang_img', activeIndex === index && 'active']">
						<image
							class="jingxiang_content"
							:src="imgUrl + 'imgs/worship/' + item.image"
							mode="heightFix"
						></image>
						<view class="jingxiang_check" v-if="activeIndex === index">
							<image :src="imgUrl + 'imgs/worship/check.png'"></image>
						</view>
					</view>
					<view class="jingxiang_name">
						{{ item.name }}
					</view>
					<view class="jingxiang_price">{{ item.price }}福币</view>
					<view class="jingxiang_time">
						<image :src="imgUrl + 'imgs/worship/clock.png'" mode=""></image>
						{{ item.time }}
					</view>
				</view>
			</view>

			<Footer
				v-if="show"
				@sendHeight="sendHeight"
				@openEquip="openEquip"
				:buyList="buyList"
				:type="'oblation'"
				:offeringType="4"
				@queryParent="queryParent"
				@buy="buy"
				class="footer"
				:isShow="false"
			/>
			<Equip ref="EquipRef" :bottom_height="bottom_height" :buyList="buyList" @del="del" />
		</view>
	</u-popup>
</template>

<script setup>
import _ from 'lodash';
import { ref, watch } from 'vue';
import { onReady, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import WorshipApi from '@/API/worship';
import Footer from '@/subPages/common/footer.vue';
import Equip from './equip.vue';
import { imgUrl } from '@/external/utils/imgUrl.js';
import { active } from 'd3';
const worshipApi = new WorshipApi();
const { peopleId } = defineProps({
	peopleId: {
		type: String,
		required: true,
		default: ''
	}
});
const activeIndex = ref();
let buyList = ref([]);
const emits = defineEmits(['finish']);
const jingxiang_list = ref([
	{
		id: 1,
		name: '初级香',
		image: 'worship_lz1.png',
		price: 10,
		time: '1小时'
	},
	{
		id: 2,
		name: '中级香',
		image: 'worship_lz2.png',
		price: 18,
		time: '6小时'
	},
	{
		id: 3,
		name: '高级香',
		image: 'worship_lz3.png',
		price: 30,
		time: '12小时'
	}
]);
const show = ref(false);
const EquipRef = ref();
let bottom_height = ref(0); //底部高度footer组件高度

const closeMore = () => {
	show.value = false;
};

const buy = (buyList) => {
	worshipApi
		.respectfulIncense({
			worshipPeopleId: peopleId,
			incenseId: buyList[0].id
		})
		.then((res) => {
			// uni.showToast({
			// 	icon: 'none',
			// 	title: '敬香成功'
			// });
			closeMore();
			emits('finish', buyList);
		})
		.catch(() => {});
};

/**
 * 选择香
 * @param {Object} item
 * @param {Object} index
 */
const chooseItem = _.throttle(function (item, index) {
	activeIndex.value = index;
	buyList.value = [item];
}, 200);

// 打开装备弹出
const openEquip = (e) => {
	EquipRef.value.show = e;
};

const sendHeight = (e) => {
	bottom_height.value = e + 'px';
};

// 删除装备列表时同步取消选中
const del = (e) => {
	activeIndex.value = null;
	buyList.value = [];
};

watch(
	show,
	(newVal) => {
		if (newVal) {
			//重置
			activeIndex.value = null;
			buyList.value = [];
		} else {
			buyList.value = [];
		}
	},
	{ immediate: true }
);

defineExpose({
	show
});
</script>

<style lang="scss">
::v-deep.u-popup__content {
	padding: 0 !important;
}

.popup_con_jingxiang {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 234, 195, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
		#ffffff;
	border-radius: 32rpx 32rpx 0 0;
	padding-bottom: 200rpx;
}

.popBgc {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}

.fixedTitle_jingxiang {
	width: 100%;
	font-size: 32rpx;
	color: #524630;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left,
	.right {
		width: 100rpx;
		flex-shrink: 0;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.middle {
		flex: 1;
		text-align: center;
	}
}

.close {
	width: 48rpx;
	height: 48rpx;
}

.jingxiang {
	width: 100%;
	padding: 20rpx 40rpx 50rpx;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 64rpx;

	.jingxiang_item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.jingxiang_img {
			width: 144rpx;
			height: 144rpx;
			margin-bottom: 24rpx;
			background: #fff;
			border-radius: 8rpx;
			border: 2rpx solid #d4c6b3;
			position: relative;

			.jingxiang_content {
				width: 100%;
				height: 100%;
			}

			.jingxiang_check {
				position: absolute;
				bottom: -2rpx;
				right: -2rpx;
				background-color: rgba(82, 70, 48, 1);
				width: 40rpx;
				height: 32rpx;
				border-radius: 16rpx 0rpx 8rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.active {
			border: 3rpx solid #524630;
		}

		.jingxiang_name {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
		}

		.jingxiang_price {
			margin-top: 12rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #524630;
			line-height: 24rpx;
		}

		.jingxiang_time {
			margin-top: 12rpx;
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			line-height: 20rpx;
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 4rpx;
			}
		}
	}
}
</style>
